<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:insert="~{include :: header('Group token')}" />
  <style>
    label {
      text-align: right;
      margin: 6px 0 5px 0;
    }
    input {
      margin: 1px 0 0 0;
    }
  </style>
</head>
<body class="white-bg">

  <div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-group-token" th:object="${data}">

      <div class="form-group">
        <label class="col-xs-3 control-label" style="padding-right: 0;">分组名称：</label>
        <div class="col-xs-9">
          <input name="group" th:field="*{group}" class="form-control" type="text" readonly />
        </div>
      </div>

      <div class="form-group">
        <label class="col-xs-3 control-label" style="padding-right: 0;">Supervisor令牌：</label>
        <div class="col-xs-9">
          <div class="input-group">
            <input class="form-control" type="text" id="supervisorToken" th:field="*{supervisorToken}" readonly />
            <span id="supervisor1" class="input-group-btn"></span>
            <span id="supervisor2" class="input-group-btn"></span>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label class="col-xs-3 control-label" style="padding-right: 0;">Worker令牌：</label>
        <div class="col-xs-9">
          <div class="input-group">
            <input class="form-control" type="text" id="workerToken" th:field="*{workerToken}" readonly />
            <span id="worker1" class="input-group-btn"></span>
            <span id="worker2" class="input-group-btn"></span>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label class="col-xs-3 control-label" style="padding-right: 0;">User令牌：</label>
        <div class="col-xs-9">
          <div class="input-group">
            <input class="form-control" type="text" id="userToken" th:field="*{userToken}" readonly />
            <span id="user1" class="input-group-btn"></span>
            <span id="user2" class="input-group-btn"></span>
          </div>
        </div>
      </div>

    </form>
  </div>

  <th:block th:insert="~{include :: footer}" />

  <script th:inline="javascript">
    const prefix = ctx + "disjob/mggroup";

    function updateToken(type, operation) {
      const input = $("#" + type + "Token");
      const params = {
        "group": '[(${data.group})]',
        "type": type,
        "operation": operation,
        "currentValue": input.val()
      };
      const ops = (operation === 'change') ? "更换" : (operation === 'set' ? "设置" : "清除");
      $.modal.confirm("确认要" + ops + "'" + type + "'令牌吗？", function () {
        $.operate.post(prefix + "/token", params, function (result) {
          if (result.code === 0) {
            input.val(result.data);
            setTokenButton(type);
          }
        }, false);
      });
    }

    function submitHandler() {
      const data = {
        "group": '[(${data.group})]',
        "supervisorToken": $("#supervisorToken").val(),
        "workerToken": $("#workerToken").val(),
        "userToken": $("#userToken").val()
      }
      const tempElement = document.createElement("textarea");
      tempElement.value = JSON.stringify(data, null, 4);
      document.body.appendChild(tempElement);
      tempElement.select();
      document.execCommand('copy')
      document.body.removeChild(tempElement);
      $.modal.msgSuccess("已复制到剪贴板");
      /*
      top.layer.msg("已复制到剪贴板", {
        icon: $.modal.icon(modal_status.SUCCESS),
        time: 500,
        shade: [0.1, '#8F8F8F']
      });
      */
      return false;
    }

    function setTokenButton(type) {
      const input = $("#" + type + "Token");
      if (input.val()) {
        $("#" + type + "1").html('<button type="button" class="btn btn-warning" onclick="updateToken(\'' + type + '\', \'change\')">更换</button>')
        $("#" + type + "2").html('<button type="button" class="btn btn-danger" onclick="updateToken(\'' + type + '\', \'clear\')">清除</button>');
      } else {
        $("#" + type + "1").html('<button type="button" class="btn btn-primary" onclick="updateToken(\'' + type + '\', \'set\')">设置</button>')
        $("#" + type + "2").html('<button type="button" class="btn btn-default disabled" disabled>清除</button>');
      }
    }

    $(function () {
      const types = ['supervisor', 'worker', 'user'];
      types.forEach(function (item) {
        setTokenButton(item);
      });
    });
  </script>

</body>
</html>
